<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile" contentType="text/html"
	>
	<pm:page
		title="hasCode.com PrimeFaces Mobile Tutorial - Simple Navigation">
		<pm:view id="viewChapter1">
			<pm:header id="Header1" title="First Chapter">
				<f:facet name="left">
					<p:button value="Back" icon="back" />
				</f:facet>
				<f:facet name="right">
					<p:button value="Settings" icon="gear"  />
				</f:facet>
				<pm:navBar>
					<p:button value="Info" />
					<p:button value="Best" styleClass="ui-btn-active" />
					<p:button value="Test" />
				</pm:navBar>
			</pm:header>
			<pm:content>
				<p:commandButton value="Modal" onclick="PF('dlg').show();" type="button"/>
				
				<p:dialog id="dialog" header="Effects" widgetVar="dlg" modal="true"
					resizable="false">
					<h:panelGrid columns="2" cellpadding="2">
						<h:outputLabel for="username" value="Username:" />
						<p:inputText value="" id="username" required="true" />

						<h:outputLabel for="password" value="Password:" />
						<h:inputSecret value="" id="password" required="true" />
						<f:facet name="footer">
							<p:commandButton id="loginButton" value="Login" />
						</f:facet>
					</h:panelGrid>
				</p:dialog>
				
				<pm:switch onLabel="Sim" offLabel="Não" />
				<p:dataList>
					<h:outputLink value="#main">Data 1</h:outputLink>
					<h:outputLink value="#main">Data 2</h:outputLink>
					<h:outputLink value="#main">Data 3</h:outputLink>
				</p:dataList>
				
				<p:inputText>text</p:inputText>
				<p:inputTextarea>Text Area</p:inputTextarea>
				
				<p:accordionPanel activeIndex="1">
					<p:tab title="Titulo 1">Content 1</p:tab>
					<p:tab title="Titulo 2">Content 2</p:tab>
					<p:tab title="Titulo 3">Content 3</p:tab>
				</p:accordionPanel>

				<p:lightBox styleClass="imagebox">
					<pm:inputRange value="" maxValue="9" minValue="2" />
					<!--  
					<iframe src="http://stockoptionsanalysis.com"></iframe>
					 -->
				</p:lightBox>
				<p:lightBox iframe="true">
					<h:outputLink value="http://stockoptionsanalysis.com"
						title="PrimeFaces HomePage">
						<h:outputText value="PrimeFaces HomePage" />
					</h:outputLink>
				</p:lightBox>
				<h:form>
					<p:commandButton value="Go to second chapter"
						action="pm:viewChapter2" />
					<p:growl id="growl" widgetWar="growlMsg" /> 
				</h:form>
            				This is the first chapter ONE
            				
				<h:panelGrid columns="2" border="5">
					<h:outputText value="Cell 1"></h:outputText>
					<h:outputText value="Cell 2"></h:outputText>
					<h:outputText value="Cell 3"></h:outputText>
					<h:outputText value="Cell 4"></h:outputText>
				</h:panelGrid>
			</pm:content>
			<pm:footer>
				<div align="center">
					Footer Content
				</div>
			</pm:footer>
		</pm:view>
		<pm:view id="viewChapter2">
			<pm:header title="Second Chapter" />
			<pm:content>
				<h:form>
					<p:commandButton value="Go to first chapter"
						action="pm:viewChapter1" />
				</h:form>
                				This is the second chapter
            </pm:content>
		</pm:view>
		
	</pm:page>
</f:view>